import { AmbientLight, BoxGeometry, Mesh, MeshBasicMaterial, PerspectiveCamera, PlaneGeometry, Scene, SphereGeometry, SpotLight, SpotLightHelper, Vector3, WebGLRenderer } from 'three'
import stats from '../utils/stats'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import dat from 'dat.gui'

const scene = new Scene()

// WebGL
const webGLrenderer = new WebGLRenderer({ antialias: true })
webGLrenderer.setClearColor(0x000000)
webGLrenderer.setPixelRatio(window.devicePixelRatio)
webGLrenderer.setSize(window.innerWidth, window.innerHeight)
webGLrenderer.shadowMap.enabled = true
document.body.appendChild(webGLrenderer.domElement)

// Camera
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(-20, 50, 40)
camera.lookAt(new Vector3(10, 0, 0))

const groundGeom = new PlaneGeometry(100, 100, 4, 4)
// 使用基础材质
const groundMesh = new Mesh(groundGeom, new MeshBasicMaterial({
  color: 0x777777
}))
groundMesh.rotation.x = -Math.PI /2
groundMesh.position.y = -20
scene.add(groundMesh)

// 添加环境光
const ambientLight = new AmbientLight(0x0c0c0c)
scene.add(ambientLight)

const spotLight = new SpotLight(0xffffff)
spotLight.position.set(-40, 60, -10)
spotLight.castShadow = true
scene.add(spotLight)
const spotLightHelper = new SpotLightHelper(spotLight)
scene.add(spotLightHelper)

const sphereGeometry = new SphereGeometry(14, 20, 20)
const cubeGeometry = new BoxGeometry(15, 15, 15)
const planeGeometry = new PlaneGeometry(14, 14, 4, 4)

const meshMaterial = new MeshBasicMaterial({
  color: 0x7777ff,
  name: 'basic Material',
  // 定义材质是否使用平面着色进行渲染。默认值为false
  flatShading: true,
  wireframe: true,
  // 由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制， 无论如何设置该值，线宽始终为1。
  // https://threejs.org/docs/index.html#api/zh/materials/MeshBasicMaterial
  wireframeLinewidth: 10
})

const sphere = new Mesh(sphereGeometry, meshMaterial)
sphere.position.set(0, 3, 2)

const cube = new Mesh(cubeGeometry, meshMaterial)
cube.position.copy(sphere.position)

const plane = new Mesh(planeGeometry, meshMaterial)
plane.position.copy(sphere.position)

// 先加正方体
scene.add(cube)


const controls = new function() {
  this.rotationSpeed = 0.02
  this.bouncingSpeed = 0.03
  this.color = meshMaterial.color.getStyle()
  this.selectedMesh = 'cube'
}

const gui = new dat.GUI()
let selectedMesh: any = cube

let  spGui = gui.addFolder('Three.MeshBasicMaterial')
spGui.addColor(controls, 'color').onChange(e => {
  meshMaterial.color.setStyle(e)
})
// 控制是否显示线框
spGui.add(meshMaterial, 'wireframe')
spGui.add(controls, 'selectedMesh', ['cube', 'sphere', 'plane']).onChange(e => {
  scene.remove(plane)
  scene.remove(cube)
  scene.remove(sphere)

  switch(e) {
    case 'cube':
      scene.add(cube)
      selectedMesh = cube
      break
    case 'sphere':
      scene.add(sphere)
      selectedMesh = sphere
      break
    case 'plane':
      scene.add(plane)
      selectedMesh = plane
      break
  }
})
const trackballControls = new TrackballControls(camera, webGLrenderer.domElement)

function render() {
  stats.update()
  trackballControls.update()

  selectedMesh.rotation.y += 0.01

  requestAnimationFrame(render)
  webGLrenderer.render(scene, camera)
}

render()